Como maquetar con 960 Grid System

960 Grid System es una biblioteca de CSS enfocada a la maquetación de una página web.
Su nombre sale de 960 píxeles que es el tamaño fijo en el que se acepta como contenedor principal.

Lo que hacemos con estas librerías es dividir los 960 píxeles en columnas de 12, 16 o 24 con sus respectivos márgenes. Esto es muy útil para organizar nuestra página ya que establecemos sectores por medio de etiquetas div, además de no tener ningún tipo de problemas con los navegadores, ya sabemos de quien hablo no?

Bueno para empezar debemos hacer referencia a las librerías.

<link rel=stylesheet href="ruta/960.css" type="text/css">

Para que se den una idea de como se organizan estas columnas mira este demo .

Y esta es la manera en la que vamos a organizar nuestros div o capas

<div class="container_12">
    <div class="grid_12">Cabecera</div>
    <div class="grid_4">Menú</div>
    <div class="grid_8">Contenido</div>
    <div class="grid_12">Pie de página</div>
</div>

Y se organiza como se muestra en esta imágen.

 

Nótese que la capa principal o contenedora lleva el nombre de container_12, dentro de esta capa modificaremos a gusto nuestra estructura.
Tener en cuenta que deberemos utilizar las clases "Alpha" y "Beta"  cuando necesitemos colocar dos divs dentro de un div de forma alineada.
Por ej:
<div class="grid_12 alpha beta">
     <div id="1"></div>
     <div id="2"></div>
</div>

Aparte, debemos hacer nuestra propia hoja de estilos a la que estabeceremos las propiedades a cada una de las capas. 

Resetear estilos CSS

La biblioteca viene con el archivo reset.css, desarrollado por Eric Meyer, que sirve para eliminar algunos valores de estilo preestablecido que los navegadores web asignan a algunos elementos, evitando así ciertas inconsistencias de los mismos en la visualización del documento.¹ El archivo (reset.css), si se enlaza como externo, debe añadirse antes de cualquier otro archivo CSS externo: 

<link href="ruta/reset.css" rel="stylesheet" type="text/css"/>
 <link href="ruta/960.css" rel="stylesheet" type="text/css"/>

Aqui te muestro un ejemplo de una web hecha en 12 columnas con este sistema. 

Es muy recomendable, sobre todo a la hora de probar nuestras webs en IE. 

Sintaxis básica de una página web

En el siguiente video explico como comenzar a programar nuestro primer programa en HTML

Video 01: Sintaxis básica de una página web



"El  HTML es un lenguaje de "marcas" o "etiquetas" y se identifican por los caracteres   "< >" donde se indica que comienza una etiqueta "<" y cuando finaliza la misma.">"
Siempre que comenzemos debemos declarar las etiquetas .

La etiqueta Se utiliza para indicarle al navegador los datos que deberá almacenar mientras estemos navegando, por ejemplo, las cokies, o el título de nuestra página.


Para programar en lenguaje html usaremos un editor de texto, te recomiendo usar notepad++ es muy fácil de usar y es gratuito.  

Crear una página web desde cero

  Para hacer una página web escribiremos nuestro código en "HTML" que es el lenguaje que se usa para describir el contenido y la estructura en forma de texto.
Así que para no aburrir, vamos a la práctica.
Creamos un archivo, para esto vamos al escritorio, damos click derecho, click en nuevo, click en documento de texto. Allí le damos el nombre, por ejemplo: "index.html". Debemos tener en cuenta que si haciendo esto nos muestra un archivo de texto y no un archivo de navegación, debemos configurar lo siguiente: Ir a miPC, herramientas, opciones de carpeta y en la pestaña "ver" tenemos que destildar la opción "Hide extensions for known file types" u "Ocultar extensiones para archivos conocidos", damos "OK" y listo, podremos guardar nuestro archivo con extensión ".html".
Teniendo en cuenta esto creamos el archivo, escritorio, click derecho, nuevo, documento de texto y le damos el nombre "index.html", le damos "ENTER" y listo, ya tenemos nuestro archivo ".html".
Ahora comenzamos a programar el "index.html"

Hola! mi nombre es Emiliano soy estudiante de la carrera de sistemas en la ciudad de La Plata de Argentina y te doy la bienvenida, este será "nuestro blog" y digo nuestro porque la idea es que lo hagamos entre todos.

La idea es aprender y compartir. Soy un aficionado a la tecnología y a la programación, aunque también soy músico, paso horas frente a la pantalla buscando adquirir nuevos conocimientos.
Esto es muy interesante, pero hacerlo solo se pone aburrido y que mejor que compartirlo con los demás y que entre todos aprendamos algo nuevo?.  

Código y palabra, programación explicada, amigos nuevos y nuevas ideas.